<template>
  <div>
    <el-dialog
      v-model="centerDialogVisible"
      :title="teaId?'修改教师':'添加教师'"
      width="500"
      center
      @close="closeDialog"
      @open="openDialog"
    >
      <el-form label-width="120" :model="TeacherInfo" ref="form" :rules="rules">
        <el-form-item label="教师账号:" prop="teaNumber">
          <el-input
            placeholder="请输入教师账号"
            v-model="TeacherInfo.teaNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号密码:" prop="teaPassword">
          <el-input
            placeholder="请输入账号密码"
            type="password"
            v-model="TeacherInfo.teaPassword"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="教师姓名:" prop="teaName">
          <el-input
            placeholder="请输入教师姓名"
            v-model="TeacherInfo.teaName"
          ></el-input>
        </el-form-item>
        <el-form-item label="教师性别:" prop="teaSex">
          <el-radio-group v-model="TeacherInfo.teaSex">
            <el-radio value="男" border size="small">男</el-radio>
            <el-radio value="女" border size="small">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作状态:" prop="teaIsWork">
          <el-radio-group v-model="TeacherInfo.teaIsWork">
            <el-radio :value="0" border size="small">在职</el-radio>
            <el-radio :value="1" border size="small">离校</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="教师职位:" prop="jobId">
          <el-select v-model="TeacherInfo.jobId">
            <el-option
              v-for="item in jobList"
              :key="item._id"
              :value="item._id"
              :label="item.jobName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="AddOrUpdateTeacher"> 确定 </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
defineOptions({
  name: "AddOrUpdateTeacher",
});
import { getJobListAPI } from "@/api/job";
import { AddOrUpdateTeacherAPI , getTeacherDetailAPI } from "@/api/teacher";
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted } from "vue";
const emits = defineEmits(["getTeacherList"]);
let centerDialogVisible = defineModel("centerDialogVisible");
let teaId = defineModel("teaId");
let TeacherInfo = reactive({
  teaNumber: "",
  teaName: "",
  teaSex: "男",
  teaPassword: "",
  jobId: "",
  teaIsWork: 0,
});
let jobList = ref([]);
let form = ref(null);
let rules = reactive({
  teaNumber: [
    { required: true, message: "请输入教师账号", trigger: "blur" },
    { min: 3, max: 10, message: "账号长度为3-10", trigger: "blur" },
  ],
  teaPassword: [
    { required: true, message: "请输入教师密码", trigger: "blur" },
    { min: 6, max: 15, message: "密码长度为6-15", trigger: "blur" },
  ],
  teaName: [
    { required: true, message: "请输入教师姓名", trigger: "blur" },
    { min: 2, max: 10, message: "姓名长度为2-10", trigger: "blur" },
  ],
  teaSex: [{ required: true, message: "请选择教师性别", trigger: "blur" }],
  teaIsWork: [
    { required: true, message: "请选择教师工作状态", trigger: "blur" },
  ],
  jobId: [{ required: true, message: "请选择教师职位", trigger: "blur" }],
});

onMounted(() => {
  getJobList();
});
//获取教师详情
const getTeacherDetail = async () => {
  console.log(teaId.value);
  if(teaId.value=="") {
    return;
  }
  let result = await getTeacherDetailAPI(teaId.value);
  Object.assign(TeacherInfo, result.data);
  TeacherInfo.jobId = result.data?.jobId?._id
};
//获取职位列表
const getJobList = async () => {
  let result = await getJobListAPI(1, 999);
  jobList.value = result.data.list;
};
//对话框打开列表
const openDialog = ()=>{
  getTeacherDetail()
}
const closeDialog = () => {
  console.log(1);
  centerDialogVisible.value = false;
  form.value.resetFields();
  teaId.value = ''
  Object.assign(TeacherInfo, {
    teaNumber: "",
    teaName: "",
    teaSex: "男",
    teaPassword: "",
    jobId: "",
    teaIsWork: 0,
    _id:""
  });
};
const AddOrUpdateTeacher = async () => {
  await form.value.validate();
  let result = await AddOrUpdateTeacherAPI(TeacherInfo);
  if (result.code === 200) {
    ElMessage.success(TeacherInfo._id ? "修改成功" : "添加成功");
    closeDialog();
    emits("getTeacherList");
  }
};
</script>

<style lang="scss" scoped></style>
